<template>
  <NavBar   :size="26" top='75rpx' title='合作加盟' colorText='#000'>
	  <view class="cooperation">
		  <view class="cooperation-container">
		  	<!-- 使用image标签作为背景图片，widthFix模式保持图片比例 -->
		  	<image class="background-img" :src="backgroundImg" mode="widthFix"></image>
		  	<!--二维码直接使用图片上的 <image class="imgs" :src="imgUrl" mode=""></image>-->
		  </view>
	  </view>

    </NavBar>
</template>
<script setup lang='ts'>
	import {ref, onMounted} from 'vue'
	import { getPostersConfig } from '../../utils/config.js'

	const imgUrl = ref('/static/uni.png')
	const backgroundImg = ref('') // 默认值

	// 页面加载时获取海报配置
	onMounted(async () => {
		try {
			const postersConfig = await getPostersConfig(false)
			console.log('合作加盟页面海报配置:', postersConfig)

			// 设置合作加盟背景
			if (postersConfig.cooperation_poster) {
				backgroundImg.value = postersConfig.cooperation_poster
				console.log('合作加盟背景加载成功:', postersConfig.cooperation_poster)
			} else {
				console.log('没有配置合作加盟背景，使用默认图片')
			}
		} catch (error) {
			console.error('加载合作加盟背景失败:', error)
			// 使用默认背景图
		}
	})

</script>
<style>
	.cooperation-container{
		 width: 100%;
		 min-height: 100vh;
		 position: relative;
		 overflow: hidden;
	}
	.cooperation{
		background: linear-gradient( 180deg, #C2DDFF 0%, #FFFFFF 100%);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		width: 100%;
		min-height: 100vh;
		padding: 30rpx;
		box-sizing: border-box;
		padding-top: 184rpx;

	}
	/* 背景图片样式 */
	.background-img {
		position: absolute;
		top: 0;
		left: 0;		
		width: 100%;
		height: 100%;
		z-index: 1;
	}
	.imgs{
		width: 250rpx;
		height: 250rpx;
		position: absolute;
		left: 3%;
		bottom: 14.1%;
		border-radius: 35rpx;
		z-index: 2;
	}
	
</style>